<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>6.列表渲染</title>
</head>

<body>
    <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
        /*
        数组方法：
          push 往数组后面追加元素
          pop 删除数组最后一项元素
          shift 删除数组第一项元素
          unshift 往数组前面追加元素
          slice 截取一段数组
          splice 可以删除、替换或增加数组元素
          concat 拼接数组
          includes 判断是否是否包含指定元素，返回布尔值
          indexOf 判断是否是否包含指定元素，返回下标（找到了就是元素下标，没有找到-1）
          join 将数组元素拼接成字符串
          reverse 反转数组
          sort 排序数组
          forEach 遍历数组
          map 遍历数组，返回新数组。长度不变，值变
          filter 过滤数组，返回新数组。长度变，值不变
          reduce 累加、求和、统计
          some 判断数组元素是否有一个满足条件
          every 判断数组元素是否都满足条件
          find 查找满足条件的第一个元素（找到到返回这个元素，没有找到返回undefined）
          findIndex 查找满足条件的第一个元素（找到到返回这个元素下标，没有找到返回-1）
      */

      const persons = [
        { id: 1, name: "华哥" },
        { id: 2, name: "红浪漫" },
        { id: 3, name: "强哥" },
      ];

      //需求: const result = [<li>华哥</li>, <li>红浪漫</li>, <li>强哥</li>];

      //return什么值就是什么 内部数据 内部数据不能写死{}
      //React 要求遍历项元素必须添加key属性 key属性的值要求是唯一的(建议使用id)
      //key 属性能提升遍历项元素渲染性能(不要包引号 )
      const result =persons.map((persons,index,array) => {
        return <li key='persons.id'>{persons.name}</li>
      })

      const element = <ul>{result}</ul>;

      ReactDOM.createRoot(document.getElementById('root')).render(element);
        </script>
</body>

</html>